import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Image, Popconfirm, Tag } from 'ant-design-vue';

import { useMessage } from '@/hooks/web/useMessage';
import { goodDownApi, goodUpApi } from '@/api/sys/shop';
import {VxeFormItemProps, VxeGridPropTypes} from "@/components/VxeTable";

type CheckedType = boolean | string | number;
export const columns: VxeGridPropTypes.Columns = [
  {
    title: '订单编号',
    field: 'orderId',
    width: 200,
    align: 'center',
  },
  {
    title: '姓名',
    field: 'userName',
    align: 'center',
  },
  {
    title: '商品名称',
    field: 'goodName',
    align: 'center',

  },
  {
    title: '积分',
    field: 'integral',
    align: 'center',
    width: 100,
  },
  {
    title: '数量',
    field: 'num',
    align: 'center',
    width: 80,
  },
  {
    title: '图片',
    field: 'mainImg',
    align: 'center',
    width: 180,
    slots:{
      default: ({ row }) => {
        let img = '';
        if (row.mainImg) {
          // let split = record.mainImg.split(",");
          // img=split[0];
          img = row.mainImg;
        }
        return h(Image, {
          width: 50,
          height: 50,
          src: img,
        });
      }
    },

  },
  {
    title: '状态',
    field: 'status',
    align: 'center',
    width: 120,
    slots: {
      default: ({row}) => {
        let status = row.status;
        let status_value = '';
        let color = '';
        switch (status) {
          case 0:
            color = 'orange';
            status_value = '待取货';
            break;
          case 1:
            status_value = '已取货';
            color = 'green';
            break;
          case 2:
            status_value = '订单准备中';
            color = 'orange';
            break;
          case 99:
            status_value = '已取消';
            color = 'red';
            break;
          default:
            break;
        }
        return h(Tag, {color}, () => status_value);
      },
    },
  },
  {
    title: '系统信息',
    field: 'note',
    align: 'center',
    width: 100,
  },
  {
    title: '创建时间',
    align: 'center',
    field: 'createTime',
    width: 180,
  },
  {
    width: 130,
    title: '操作',
    align: 'center',
    field: '',
    slots: { default: 'action' },
    fixed: 'right',
  },
];

export const searchFormSchema: VxeFormItemProps[] = [
  {


    span: 5,
    field: 'userName',
    title: '姓名',
    itemRender: {
      props: {
        placeholder: '请输入',
      },
      name: 'AInput',
    },

  },
  {
    field: 'goodName',
    title: '商品名称',
    itemRender: {
      props: {
        placeholder: '请输入',
      },
      name: 'AInput',
    },
    span: 5
  },
  {
    field: 'timeArr',
    title: '日期区间',
    itemRender: {
      props: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
      name: 'ARangePicker',
    },
    span: 5
  },
  {
    field: 'status',
    title: '状态',
    span: 5,
    itemRender: {
      defaultValue: 2,
      props: {
        style:{width: '100%'},
        placeholder: '请选择',
        options: [
          { label: '全部', value: '' },
          { label: '待取货', value: 0 },
          { label: '已取货', value: 1 },
          { label: '订单准备中', value: 2 },
          { label: '已取消', value: 99 },
        ],
      },
      name: 'ASelect',
    },
  },
  {
    span: 5,
    itemRender: {
      name: 'VxeButtonGroup',
      options: [
        { type: 'reset', content: '重置' },
        { type: 'submit', content: '查询', status: 'primary' },
      ],
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'categoryName',
    label: '分类名称',
    required: true,
    component: 'Input',
  },
  {
    label: '排序',
    field: 'sort',
    component: 'Input',
  },
  {
    label: '网络图片',
    field: 'img',
    component: 'Input',
  },
];
